<template>
  <!-- 头部信息 -->
  <HeaderView title="图书兄弟" :hasBack='false' path=""/>

  <div class="content">
    <!-- 左侧sliderBar -->
    <div class="leftContent">
      <LeftSliderView :leftCollapse="leftCollapse" @sliderClick="sliderClick"/>
    </div>

     <!-- 右侧选项卡 -->
    <div class="rightContent">
      <RightTabView :cid="cid"/>
    </div>
  </div>

  <!-- 底部tabbar -->
  <BottomView/>

  <!-- 时间超时 -->
  <TimeOutView v-if="timeFlag"/>
</template>

<script lang="ts" setup>
import HeaderView from '@/components/Header/IndexView.vue'
import BottomView from '@/components/Bottom/IndexView.vue'
import TimeOutView from '@/components/TimeOut/IndexView.vue'
import LeftSliderView from './component/LeftSliderView.vue'
import RightTabView from './component/RightTabView.vue'

import { ref, onMounted } from 'vue'
import { GetCategory } from '@/api/category'

const timeFlag = ref(false) // 请求超时 显示界面
const leftCollapse = ref([]) // 左侧手风琴数据
const cid = ref(0) // 分类ID

onMounted(() => init())

// 数据初始化
const init = async () => {
  const res = await GetCategory().catch(err => {
    if (err.code === 'ECONNABORTED' || err.code === 'ERR_NETWORK') timeFlag.value = true
  })

  try {
    if (res?.status === 200) {
      leftCollapse.value = res.data.categories
    }
  } catch (error) {
    console.log(error)
  }
}

// 左侧slider点击
const sliderClick = (id: number) => {
  cid.value = id
}

</script>
<script lang="ts">
export default {
  name: 'categoryView'
}
</script>

<style lang="scss" scoped>
.content{
  .leftContent{
    position: fixed;
    left: 0;
    top: 105px;
    bottom: 50px;
    overflow: hidden;
    overflow-y: scroll;
  }
  .rightContent{
    ::v-deep .van-tabs__wrap{
      position: fixed;
      left: 130px;
      top: 50px;
      right: 0;
    }
    ::v-deep .van-tabs__content{
      position: fixed;
      left: 130px;
      top: 105px;
      bottom:50px;
      overflow: scroll;
    }
  }
}
</style>
